<script setup>
const props = defineProps({
	tags: {
		type: Array,
		required: true,
		default:()=>{
			return [
				{
					name:'胶原蛋白',
				},
				{
					name:'茶树精油',
				},
				{
					name:'甘油',
				},
				{
					name:'氨基酸',
				},
				{
					name:'雅诗兰黛/阿玛尼',
				},
				{
					name:'眼线笔',
				},
				{
					name:'维生素 C',
				},
				{
					name:'通勤妆',
				},
				{
					name:'国风妆容',
				}
			]
		},
	},
})
</script>

<template>
	<div class="wrap">
		<div class="title">关键词：</div>
		<div class="tags">
			<span class="tag" v-for="(item,index) in tags" :key="item.name">{{item.name}}</span>
		</div>
	</div>
</template>

<style scoped lang="scss">
.title{
	font-weight: 430;
	font-size: 18px;
	color: #000000;
	line-height: 21px;
	margin-bottom: 16px;
}
.tags{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	.tag{
		margin-right: 8px;
		margin-bottom: 8px;
		box-sizing: border-box;
		//height: 35px;
		border-radius: 6px;
		border: 1px solid #E0E0E0;
		padding: 8px 16px;
		font-weight: 305;
		font-size: 16px;
		color: #000000;
		line-height: 19px;
	}
}
</style>
